<template>
  <view class="my-page">
    <view style="width: 100vw;height: 100vh;position: fixed;left: 0;top: 0;z-index: 0;background: linear-gradient(180deg, #79B0F7 0%, #F2F8FF 26.34%, #FFFFFF 100%);
backdrop-filter: blur(8px);">
      <image style="width: 100%;height: 100%;position:relative;z-index: 1" src="/static/image/mine_bg.png"></image>
    </view>
    <view class="my-info" :style="{ paddingTop: statusBarHeight + 'px' }" @click="handleUser">
      <image style="width: 128rpx;height: 128rpx;margin-bottom: 24rpx"
        :src="userInfo.avatar_url || '/static/default_user.png'"></image>
      <view class="username">{{ userInfo.nickname || userInfo.id ||'去登录' }}</view>
      <!--      <view class="username">{{ userInfo.phone }}</view>-->
    </view>

    <!-- 用户数据展示 -->
    <!-- <view class="user-data-section" v-if="userInfo.id && userInfo.user_type === 3">
      <view class="data-item" @click="toCouponPage">
        <view class="data-number">{{ couponCount }}</view>
        <view class="data-label">优惠券</view>
      </view>
      <view class="data-item" @click="toBalancePage">
        <view class="data-number">{{ userInfo.balance }}</view>
        <view class="data-label">充值/提现</view>
      </view>
    </view> -->

    <view class="my-content">
      <!-- <view class="my-cell">
        <view class="cell-item" v-for="item in cellList1" :key="item.name" @click="toPage(item)">
          <view class="cell-item-left">
            <image :src="item.src"></image>
            <view class="cell-item-name">{{ item.name }}</view>
          </view>
          <button v-if="item.openType === 'contact'" class="contact-btn" open-type="contact"></button>
          <image v-else src="arrow-right" style="width: 16rpx;height: 28rpx"></image>
        </view>
      </view> -->
      <!-- 我的服务 -->
      <view class="service">
        <view class="service-bottom">
          <view class="service-bottom-item" v-for="item in cellList1" @click="toPage(item)">
            <image style="width:44rpx;height: 44rpx;" :src="item.src"></image>
            <text>{{ item.name }}</text>
            <button v-if="item.openType === 'contact'" class="contact" open-type="contact"></button>
          </view>
        </view>
      </view>

      <view class="service" v-if="userInfo.user_type === 3">
        <view class="service-bottom">
          <view class="service-bottom-item" v-for="item in cellList2" @click="toPage(item)">
            <image style="width:44rpx;height: 44rpx;" :src="item.src"></image>
            <text>{{ item.name }}</text>
            <button v-if="item.openType === 'contact'" class="contact" open-type="contact"></button>
          </view>
        </view>
      </view>
    </view>

    <view class="logout-btn" v-if="userInfo.id" @click="logout">
      退出登录
    </view>

    <u-tabbar @change="beforeSwitch" active-color="#FFC300" inactive-color="#333" v-model="current" :list="tabbarList"
      icon-size="55" height="120rpx" :mid-button="false"></u-tabbar>

  </view>
</template>

<script>
import Navbar from "../../components/Navbar.vue";

export default {
  components: { Navbar },
  data() {
    return {
      current: 4,
      statusBarHeight: 0,
      couponCount: 0,
      balance: '0.00',
    }
  },
  computed: {
    cellList1() {
      return [
        {
          name: '旅游订单',
          src: '/static/mine/order.png',
          url: '/pages/travelOrder/travelOrder',
          needLogin: true
        },
        {
          name: '定制记录',
          src: '/static/mine/order.png',
          url: '/pages/travelCustomOrder/travelCustomOrder',
          needLogin: true
        },
        {
          name: '商品订单',
          src: '/static/mine/order.png',
          url: '/pages/order/order',
          needLogin: true
        },
        // 我的下载
        {
          name: '收货地址',
          src: '/static/mine/address.png',
          url: '/pages/address/address',
          needLogin: true
        },
        // 调色记录
        {
          name: '联系客服',
          src: '/static/mine/service.png',
          openType: 'contact'
        },

        {
          name: '关于我们',
          src: '/static/mine/about.png',
          url: '/pages/login/service?key=about',
        }
      ]
    },
    cellList2() {
      return [
        {
          name: '佣金记录',
          src: '/static/mine/order.png',
          url: '/pages/mine/balanceOrder',
          needLogin: true
        },
        {
          name: '佣金提现',
          src: '/static/mine/order.png',
          url: '/pages/mine/withdraw',
          needLogin: true
        },
        {
          name: '账户充值',
          src: '/static/mine/order.png',
          url: '/pages/mine/recharge',
          needLogin: true
        },
        {
          name: '余额明细',
          src: '/static/mine/order.png',
          url: '/pages/mine/balance',
          needLogin: true
        },
        {
          name: '我的代付',
          src: '/static/mine/order.png',
          url: '/pages/shareOrder/shareOrder',
          needLogin: true
        },
        {
          name: '邀请分享',
          src: '/static/mine/address.png',
          url: '/pages/mine/code',
          needLogin: true
        },
      ]
    }
  },
  onShow() {
    this.$store.dispatch('getUserInfo')
  },
  onLoad() {
    //获取手机系统的信息 里面有状态栏高度和设备型号
    let {
      statusBarHeight,
      system
    } = uni.getSystemInfoSync()
    // 注意返回的单位是px 不是rpx
    console.log('状态栏高度是', statusBarHeight + 'px', '设备型号是', system);
    // 这个高度刚好和胶囊对齐
    this.statusBarHeight = statusBarHeight + (system.indexOf('iOS') > -1 ? 40 : 44)
  },
  methods: {
    // 获取用户数据
    getUserData() {
      if (this.userInfo.id) {
        // 获取优惠券数量
        this.$api.getCouponCount().then(res => {
          this.couponCount = res.count || 0
        }).catch(() => {
          this.couponCount = 0
        })

        // 获取用户余额
        this.$api.getUserBalance().then(res => {
          this.balance = (res.balance || 0).toFixed(2)
        }).catch(() => {
          this.balance = '0.00'
        })
      }
    },
    // 跳转到优惠券页面
    toCouponPage() {
      uni.showToast('暂未开放')
      if (!this.userInfo.id) {
        this.$goPage({
          url: '/pages/login/login'
        })
        return
      }
      this.$goPage({
        url: '/pages/coupon/coupon',
        needLogin: true
      })
    },
    // 跳转到余额页面
    toBalancePage() {
      if (!this.userInfo.id) {
        this.$goPage({
          url: '/pages/login/login'
        })
        return
      }
      this.$goPage({
        url: '/pages/mine/recharge',
        needLogin: true
      })
    },
    copyValue(data) {
      uni.setClipboardData({
        data,
        success: () => {
          uni.showToast({
            title: '客服微信号已复制，请添加好友，我们将尽快邀您入群',
            icon: 'none'
          })
        },
        fail: (e) => {
          uni.showToast({
            title: e.errMsg,
            icon: 'none'
          })
        }
      })
    },
    //
    copyValueQQ(data) {
      uni.showToast({
        title: '正在搭建中，敬请期待❤️',
        icon: 'none'
      })
      return
      uni.setClipboardData({
        data,
        success: () => {
          uni.showToast({
            title: '正在搭建中，敬请期待❤',
            icon: 'none'
          })
        }
      })
    },
    handleUser() {
      if (this.userInfo.id) {
        this.$goPage({
          url: '/pages/mine/edit',
          needLogin: true
        })
      } else {
        this.$goPage({
          url: '/pages/login/login'
        })
      }
    },
    logout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        // 文本颜色
        color: '#333333',
        // 取消按钮的文字颜色
        cancelColor: '#D43030',
        // 确认按钮的文字颜色
        confirmColor: '#333333',
        success: (res) => {
          if (res.confirm) {
            this.$store.commit('LOGOUT')
            uni.reLaunch({
              url: '/pages/getColor/getColor'
            })
          }
        }
      })
    },
    toPage(item) {
      // 处理原生客服跳转
      if (item.openType === 'contact') {
        // 原生客服功能由微信小程序自动处理，这里不需要额外操作
        return;
      }
      this.$goPage({
        url: item.url,
        needLogin: item.needLogin,
        switchTab: item.switchTab
      })
    }
  }
}
</script>

<style lang="scss">
.my-page {
  height: 100vh;
  background: #F5F5F5;

  .service {
    border-radius: 20rpx;
    background: #FFFFFF;
    margin-top: 40rpx;
    // padding: 24rpx;

    .service-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 30rpx 30rpx 20rpx 30rpx;

      .service-top-txt {
        font-size: 28rpx;
        font-weight: 600;
        color: #333333;
      }

      .service-top-all {
        display: flex;
        align-items: center;

        text {
          font-size: 24rpx;
          color: #666666;
        }

        image {
          width: 70rpx;
          height: 70rpx;
        }
      }
    }

    .service-bottom {
      display: flex;
      align-items: center;
      padding-top: 20rpx;
      padding-bottom: 30rpx;
      flex-wrap: wrap;

      .service-bottom-item {
        width: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        margin: 20rpx 0;
        color: #333;

        .contact {
          position: absolute;
          width: 100%;
          height: 120rpx;
          top: 0;
          left: 0;
          opacity: 0;
        }

        image {
          width: 70rpx;
          height: 70rpx;
        }

        text {
          font-size: 22rpx;
          color: #666666;
          margin-top: 20rpx;
        }
      }
    }
  }

  // 用户数据展示区域
  .user-data-section {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 32rpx 24rpx;
    padding: 12rpx 0;
    // background: rgba(255, 255, 255, 0.9);
    // backdrop-filter: blur(8px);
    // border-radius: 16rpx;

    .data-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;

      .data-number {
        font-size: 48rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 8rpx;
      }

      .data-label {
        font-size: 28rpx;
        color: #666;
      }
    }
  }

  .detail-mask {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .detail-popup {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      position: relative;

      .btn-group {
        position: absolute;
        left: 0;
        right: 0;
        width: 100%;
        bottom: 112rpx;
      }

      .detail-img {
        width: 630rpx;
        height: 603rpx;
      }

      .qq-btn,
      .we-btn {
        margin: 0 auto;
        width: 512rpx;
        height: 78rpx;
        text-align: center;
        line-height: 78rpx;
        border-radius: 612px;
        background: #FFC300;
        font-size: 32rpx;
        font-weight: 400;
        color: #FFFFFF;
      }

      .we-btn {
        margin-top: 24rpx;
        background: #69C06E;
      }
    }

    .detail-close {
      width: 80rpx;
      height: 80rpx;
      margin-top: 60rpx;
    }
  }

  .logout-btn {
    width: 512rpx;
    height: 94rpx;
    border-radius: 612px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8rpx);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 32rpx;
    font-weight: 400;
    color: rgba(212, 48, 48, 1);
    line-height: 94rpx;
    text-align: center;
    margin: 23rpx auto;
  }

  .my-content {
    position: relative;
    z-index: 2;
    padding: 38rpx 32rpx;
    padding-top: 0;

    .my-cell {
      border-radius: 16rpx;
      width: 100%;
      margin-bottom: 24rpx;
      background: #FFFFFF;
      backdrop-filter: blur(8px);

      .cell-item {
        display: flex;
        align-items: center;
        padding: 0 28rpx;
        position: relative;

        .cell-item-left {
          flex-grow: 1;
          height: 96rpx;
          display: flex;
          align-items: center;

          image {
            width: 48rpx;
            height: 48rpx;
            margin-right: 24rpx;
          }

          .cell-item-name {
            color: #333333;
            font-size: 32rpx;
            font-weight: 400;
          }
        }

        .contact-btn {
          position: absolute;
          right: 28rpx;
          top: 50%;
          transform: translateY(-50%);
          width: 100%;
          height: 100%;
          background: transparent;
          border: none;
          padding: 0;
          margin: 0;
          opacity: 0;

          &::after {
            border: none;
          }
        }
      }
    }
  }

  .my-info {
    width: 100vw;
    height: 378rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
    margin-bottom: 24rpx;
  }
}
</style>
